<template>
  <div class="countersign-config">
    <el-form label-width="120px" class="sub-form">
      <el-form-item label="执行方式">
        <el-radio-group v-model="countersign.type" @change="onChange">
          <el-radio label="">普通</el-radio>
          <el-radio label="parallel">并行会签</el-radio>
          <el-radio label="serial">串行会签</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <template v-if="countersign.type">
        <el-form-item label="循环数据源">
          <el-select v-model="countersign.loopDataInputRef" @change="onChange" placeholder="请选择循环数据源">
            <el-option label="根据人员配置自动生成" value="assigneeList" />
            <el-option label="自定义变量" value="customVariable" />
          </el-select>
        </el-form-item>
        
        <el-form-item v-if="countersign.loopDataInputRef === 'customVariable'" label="自定义变量名">
          <el-input v-model="countersign.customVariableName" @input="onChange" placeholder="请输入变量名，如：userList" />
        </el-form-item>
        
        <el-form-item label="完成条件">
          <el-select v-model="countersign.completionType" @change="onChange">
            <el-option label="全部完成" value="all" />
            <el-option label="最少通过数" value="minPass" />
            <el-option label="最多通过数" value="maxPass" />
            <el-option label="百分比" value="percentage" />
          </el-select>
        </el-form-item>
        
        <template v-if="countersign.completionType === 'minPass'">
          <el-form-item label="最少通过数">
            <el-input-number 
              v-model="countersign.minPass" 
              :min="1" 
              :max="getMaxPassCount()"
              @change="onChange" 
            />
            <span class="help-text">当前人员总数：{{ getAssigneeCount() }}</span>
          </el-form-item>
        </template>
        
        <template v-if="countersign.completionType === 'maxPass'">
          <el-form-item label="最多通过数">
            <el-input-number 
              v-model="countersign.maxPass" 
              :min="1" 
              :max="getAssigneeCount()"
              @change="onChange" 
            />
            <span class="help-text">当前人员总数：{{ getAssigneeCount() }}</span>
          </el-form-item>
        </template>
        
        <template v-if="countersign.completionType === 'percentage'">
          <el-form-item label="通过百分比">
            <el-input-number 
              v-model="countersign.percentage" 
              :min="1" 
              :max="100"
              @change="onChange" 
            />
            <span class="help-text">% (当前人员总数：{{ getAssigneeCount() }})</span>
          </el-form-item>
        </template>
        
        <el-form-item label="会签说明">
          <el-alert
            :title="getCountersignDescription()"
            type="info"
            :closable="false"
            show-icon
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  countersign: Object,
  assignees: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['change'])

/**
 * 处理变更
 */
function onChange() {
  emit('change')
}

/**
 * 获取人员总数
 */
function getAssigneeCount() {
  if (!props.assignees || props.assignees.length === 0) {
    return 0
  }
  
  let count = 0
  props.assignees.forEach(assignee => {
    if (assignee.value && Array.isArray(assignee.value)) {
      count += assignee.value.length
    }
  })
  
  return count
}

/**
 * 获取最大通过数
 */
function getMaxPassCount() {
  return getAssigneeCount()
}

/**
 * 获取会签说明
 */
function getCountersignDescription() {
  const count = getAssigneeCount()
  const type = props.countersign?.type || ''
  const completionType = props.countersign?.completionType || ''
  
  if (count === 0) {
    return '请先配置处理人员'
  }
  
  let description = `当前配置了 ${count} 个处理人员。`
  
  if (type === 'parallel') {
    description += '并行会签：所有人同时收到任务，'
  } else if (type === 'serial') {
    description += '串行会签：按顺序依次处理，'
  }
  
  if (completionType === 'all') {
    description += '需要所有人完成才能进入下一节点。'
  } else if (completionType === 'minPass') {
    const minPass = props.countersign?.minPass || 1
    description += `至少需要 ${minPass} 人通过才能进入下一节点。`
  } else if (completionType === 'maxPass') {
    const maxPass = props.countersign?.maxPass || 1
    description += `最多需要 ${maxPass} 人通过即可进入下一节点。`
  } else if (completionType === 'percentage') {
    const percentage = props.countersign?.percentage || 50
    description += `需要 ${percentage}% 的人员通过才能进入下一节点。`
  }
  
  return description
}
</script>

<style scoped>
.countersign-config {
  width: 100%;
}

.sub-form .el-form-item {
  margin-bottom: 10px;
}

.sub-form .el-form-item__label {
  color: #b1b3b8;
  font-size: 13px;
}

.help-text {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}

.el-alert {
  margin-top: 8px;
}
</style> 